<%--
  Created by IntelliJ IDEA.
  User: 徐洲
  Date: 2023/12/18
  Time: 11:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>图表统计</title>
  <link rel="stylesheet" href="../../assets/lib/bootstrap.css" />
  <link rel="stylesheet" href="../../assets/lib/main.css" />
  <script src="../../assets/lib/jquery.js"></script>
  <script type="text/javascript" src="../../assets/lib/echarts.min.js"></script>
</head>

<body>
<div class="container-fluid">
  <div class="row spannel_list">
    <div class="col-sm-3 col-xs-6">
      <div class="spannel">
        <em>1015</em><span>篇</span>
        <b>文章总数</b>
      </div>
    </div>
    <div class="col-sm-3 col-xs-6">
      <div class="spannel scolor01">
        <em>123</em><span>篇</span>
        <b>日新增文章数</b>
      </div>
    </div>
    <div class="col-sm-3 col-xs-6">
      <div class="spannel scolor02">
        <em>350</em><span>个</span>
        <b>用户数量</b>
      </div>
    </div>
    <div class="col-sm-3 col-xs-6">
      <div class="spannel scolor03">
        <em>23</em><span>个</span>
        <b>日新增货用户数</b>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row curve-pie">
    <div class="col-lg-8 col-md-8">
      <div class="gragh_pannel" id="curve_show"></div>
    </div>
    <div class="col-lg-4 col-md-4">
      <div class="gragh_pannel" id="pie_show"></div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="column_pannel" id="column_show"></div>
</div>

<script>
  var oChart = echarts.init(document.getElementById('curve_show'));
  var aList_all = [{
    'count': 36,
    'date': '2023-11-13'
  }, {
    'count': 52,
    'date': '2023-11-14'
  }, {
    'count': 78,
    'date': '2023-11-15'
  }, {
    'count': 85,
    'date': '2023-11-16'
  }, {
    'count': 65,
    'date': '2023-11-17'
  }, {
    'count': 72,
    'date': '2023-11-18'
  }, {
    'count': 88,
    'date': '2023-11-19'
  }, {
    'count': 64,
    'date': '2023-11-20'
  }, {
    'count': 72,
    'date': '2023-11-21'
  }, {
    'count': 90,
    'date': '2023-11-22'
  }, {
    'count': 96,
    'date': '2023-11-23'
  }, {
    'count': 100,
    'date': '2023-11-24'
  }, {
    'count': 102,
    'date': '2023-11-25'
  }, {
    'count': 110,
    'date': '2023-11-26'
  }, {
    'count': 123,
    'date': '2023-11-27'
  }, {
    'count': 100,
    'date': '2023-11-28'
  }, {
    'count': 132,
    'date': '2023-11-29'
  }, {
    'count': 146,
    'date': '2023-11-30'
  }, {
    'count': 200,
    'date': '2023-12-01'
  }, {
    'count': 180,
    'date': '2023-12-02'
  }, {
    'count': 163,
    'date': '2023-12-03'
  }, {
    'count': 110,
    'date': '2023-12-04'
  }, {
    'count': 80,
    'date': '2023-12-05'
  }, {
    'count': 82,
    'date': '2023-12-06'
  }, {
    'count': 70,
    'date': '2023-12-07'
  }, {
    'count': 65,
    'date': '2023-12-08'
  }, {
    'count': 54,
    'date': '2023-12-09'
  }, {
    'count': 40,
    'date': '2023-12-10'
  }, {
    'count': 45,
    'date': '2023-12-11'
  }, {
    'count': 38,
    'date': '2023-12-12'
  }, ];

  let aCount = [];
  let aDate = [];

  for (var i = 0; i < aList_all.length; i++) {
    aCount.push(aList_all[i].count);
    aDate.push(aList_all[i].date);
  }

  var chartopt = {
    title: {
      text: '月新增文章数',
      left: 'center',
      top: '10'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['新增文章'],
      top: '40'
    },
    toolbox: {
      show: true,
      feature: {
        mark: {
          show: true
        },
        dataView: {
          show: true,
          readOnly: false
        },
        magicType: {
          show: true,
          type: ['line', 'bar']
        },
        restore: {
          show: true
        },
        saveAsImage: {
          show: true
        }
      }
    },
    calculable: true,
    xAxis: [{
      name: '日',
      type: 'category',
      boundaryGap: false,
      data: aDate
    }],
    yAxis: [{
      name: '月新增文章数',
      type: 'value'
    }],
    series: [{
      name: '新增文章',
      type: 'line',
      smooth: true,
      itemStyle: {
        normal: {
          areaStyle: {
            type: 'default'
          },
          color: '#f80'
        },
        lineStyle: {
          color: '#f80'
        }
      },
      data: aCount
    }],
    areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(255,136,0,0.39)'
        }, {
          offset: .34,
          color: 'rgba(255,180,0,0.25)'
        }, {
          offset: 1,
          color: 'rgba(255,222,0,0.00)'
        }])

      }
    },
    grid: {
      show: true,
      x: 50,
      x2: 50,
      y: 80,
      height: 220
    }
  };

  oChart.setOption(chartopt);


  var oPie = echarts.init(document.getElementById('pie_show'));
  var oPieopt = {
    title: {
      top: 10,
      text: '分类文章数量比',
      x: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565'],
    legend: {
      x: 'center',
      top: 65,
      data: ['海洋生物', '海洋环境', '海洋资源', '海洋污染']
    },
    toolbox: {
      show: true,
      x: 'center',
      top: 35,
      feature: {
        mark: {
          show: true
        },
        dataView: {
          show: true,
          readOnly: false
        },
        magicType: {
          show: true,
          type: ['pie', 'funnel'],
          option: {
            funnel: {
              x: '25%',
              width: '50%',
              funnelAlign: 'left',
              max: 1548
            }
          }
        },
        restore: {
          show: true
        },
        saveAsImage: {
          show: true
        }
      }
    },
    calculable: true,
    series: [{
      name: '访问来源',
      type: 'pie',
      radius: ['45%', '60%'],
      center: ['50%', '65%'],
      data: [{
        value: 300,
        name: '海洋生物'
      }, {
        value: 100,
        name: '海洋环境'
      }, {
        value: 260,
        name: '海洋资源'
      }, {
        value: 180,
        name: '海洋污染'
      }]
    }]
  };
  oPie.setOption(oPieopt);



  var oColumn = this.echarts.init(document.getElementById('column_show'));
  var oColumnopt = {
    title: {
      text: '分类文章增加量',
      left: 'center',
      top: '10'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['海洋生物', '海洋环境', '海洋资源', '海洋污染'],
      top: '40'
    },
    toolbox: {
      show: true,
      feature: {
        mark: {
          show: true
        },
        dataView: {
          show: true,
          readOnly: false
        },
        magicType: {
          show: true,
          type: ['line', 'bar']
        },
        restore: {
          show: true
        },
        saveAsImage: {
          show: true
        }
      }
    },
    calculable: true,
    xAxis: [{
      type: 'category',
      data: ['8月', '9月', '10月', '11月', '12月']
    }],
    yAxis: [{
      name: '文章增加量',
      type: 'value'
    }],
    series: [{
      name: '海洋生物',
      type: 'bar',
      barWidth: 20,
      itemStyle: {
        normal: {
          areaStyle: {
            type: 'default'
          },
          color: '#fd956a'
        }
      },
      data: [80, 78, 92, 109, 120]
    }, {
      name: '海洋环境',
      type: 'bar',
      barWidth: 20,
      itemStyle: {
        normal: {
          areaStyle: {
            type: 'default'
          },
          color: '#2bb6db'
        }
      },
      data: [40, 46, 52, 69, 80]
    }, {
      name: '海洋资源',
      type: 'bar',
      barWidth: 20,
      itemStyle: {
        normal: {
          areaStyle: {
            type: 'default'
          },
          color: '#13cfd5'
        }
      },
      data: [50, 66, 52, 79, 90]
    }, {
      name: '海洋污染',
      type: 'bar',
      barWidth: 20,
      itemStyle: {
        normal: {
          areaStyle: {
            type: 'default'
          },
          color: '#00ce68'
        }
      },
      data: [60, 50, 72, 89, 100]
    }],
    grid: {
      show: true,
      x: 50,
      x2: 30,
      y: 80,
      height: 260
    },
    dataZoom: [ //给x轴设置滚动条
      {
        start: 0, //默认为0
        end: 100 - 1000 / 31, //默认为100
        type: 'slider',
        show: true,
        xAxisIndex: [0],
        handleSize: 0, //滑动条的 左右2个滑动条的大小
        height: 8, //组件高度
        left: 45, //左边的距离
        right: 50, //右边的距离
        bottom: 26, //右边的距离
        handleColor: '#ddd', //h滑动图标的颜色
        handleStyle: {
          borderColor: "#cacaca",
          borderWidth: "1",
          shadowBlur: 2,
          background: "#ddd",
          shadowColor: "#ddd",
        }
      }
    ]
  };
  oColumn.setOption(oColumnopt);
</script>
</body>

</html>